<template>
    <div>
        <!-- 手机专区 -->
        <div class="img">
            <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/12A131003EBFBF27CB28D38629B8492D.png.50.webp" alt="">
        </div>
        <div class="first-line" >
            <div class="first-box" v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <div class="span"><span>预订最高省500元</span> </div>
                <div class="content">
                    <p><span>价保618</span>&nbsp;{{v.goodName}}</p>
                    <div>{{v.goodMessage}}</div>
                    <span class="good-price">￥{{v.goodPrice}}</span>
                    <div class="active">分期免息</div>
                </div>
            </div >
        </div>
        <!-- 智慧办公 -->
        <div class="img">
            <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/28E75DD5134ED1DFAF6D797BCD3B7984.png.50.webp" alt="">
        </div>
        <div class="first-line" >
            <div class="first-box" v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <div class="span"><span>预订最高省500元</span> </div>
                <div class="content">
                    <p><span>价保618</span>&nbsp;{{v.goodName}}</p>
                    <div>{{v.goodMessage}}</div>
                    <span class="good-price">￥{{v.goodPrice}}</span>
                    <div class="active">分期免息</div>
                </div>
            </div >
        </div>
        <!-- 运动健康 -->
        <div class="img">
            <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/12A131003EBFBF27CB28D38629B8492D.png.50.webp" alt="">
        </div>
        <div class="first-line" >
            <div class="first-box" v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <div class="span"><span>预订最高省500元</span> </div>
                <div class="content">
                    <p><span>价保618</span>&nbsp;{{v.goodName}}</p>
                    <div>{{v.goodMessage}}</div>
                    <span class="good-price">￥{{v.goodPrice}}</span>
                    <div class="active">分期免息</div>
                </div>
            </div >
        </div>
        <!-- 影音娱乐 -->
        <div class="img">
            <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/BD2B8D9ABA5A810D32B6D41E80405046.png.50.webp" alt="">
        </div>
        <div class="first-line" >
            <div class="first-box" v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <div class="span"><span>预订最高省500元</span> </div>
                <div class="content">
                    <p><span>价保618</span>&nbsp;{{v.goodName}}</p>
                    <div>{{v.goodMessage}}</div>
                    <span class="good-price">￥{{v.goodPrice}}</span>
                    <div class="active">分期免息</div>
                </div>
            </div >
        </div>
        <!-- 智能家居 -->
        <div class="img">
            <img src="https://res.vmallres.com/uomcdn/CN/cms/202205/3967C27FDCB1BB51759897E1B7313E39.png.50.webp" alt="">
        </div>
        <div class="first-line" >
            <div class="first-box" v-for="(v,i) in arr" :key="i">
                <img :src="v.img" alt="">
                <div class="span"><span>预订最高省500元</span> </div>
                <div class="content">
                    <p><span>价保618</span>&nbsp;{{v.goodName}}</p>
                    <div>{{v.goodMessage}}</div>
                    <span class="good-price">￥{{v.goodPrice}}</span>
                    <div class="active">分期免息</div>
                </div>
            </div >
        </div>
    </div>
</template>

<script>
import link from "@/apis/link.js"
export default {
    data(){
        return {
            arr:[]
        }
    },
    mounted(){
        link("/baokuan").then((ok)=>{
            console.log(ok.data);
            this.arr = ok.data
        })
    }
}
</script>

<style scoped lang="scss">
    .img{
        width: 3.84rem;
        height: 0.42rem;
        margin: 0 auto;
        font-size: 0.16rem;
        // position: absolute;
        margin-bottom: 0.1rem;
        background-color: #d7e3f7;
        img{
            width: 100%;
            height:100%;
        }
    }
    .first-line{
        // height: 2.30rem;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .first-box{
            width: 1.22rem;
            height: 2.22rem;
            background-color: white;
            border-radius: 0.1rem;
            margin-bottom: 0.1rem;
            img{
                height: 0.9384rem;
                width: 0.9384rem;
                display: block;
                margin: auto;
                margin-top: 0.15rem;
            }
            .span{
                font-size: 0.09rem;
                margin: auto;
                width: 0.92rem;
                background-color: #fbe7ea;
                span{
                    color: rgb(207, 10, 44);
                }
            }
            .content{
                height: 0.96rem;
                padding: 0.05rem;
                p{
                    font-size: 0.09rem;
                    font-weight: 600;
                   span{
                    background-color: rgb(207, 10, 44);
                    color: white;
                    font-size: 0.09rem;
                    display: inline-block;
                    border-radius: 0.1rem;
                    padding-left: 0.05rem;
                    padding-right: 0.05rem;
                }
                }
                
                div{
                    font-size: 0.12rem;
                    text-align: center;
                    color: #8d8d8d;
                }
                .good-price{
                    font-size: 0.13rem;
                    color: rgb(207, 10, 44);
                    font-weight: 600;
                    display: block;
                    text-align: center;
                    line-height: 0.16rem;
                }
                .active{
                    width: 0.58rem;
                    height: 0.14rem;
                    color: rgb(207, 10, 44);
                    border: 0.01rem solid #eea7b3;
                    border-radius: 0.1rem;
                    margin: auto;
                }
            }
        }
    }
</style>